<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Template • TodoMVC</title>
	<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
	<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
	<!-- CSS overrides - remove if you don't need it  -->
	<link rel="stylesheet" href="css/app.css">
	<script src="./js/react.development.js"></script>
	<script src="./js/react-dom.development.js"></script>
	<script src="./js/babel.min.js"></script>
	<style>
		.no-session {
			height: 80px;
			text-align: center;
			line-height: 80px;
		}

		.change-input {
			display: inline-block;
			margin-left: 10%;
			width: 87%;
			height: 58.8px;
		}

		/* .view{
			display: flex;
		} */
		.toggle {
			/* width: 10%; */
		}
	</style>
</head>

<body>

	<div id="root">
	</div>

	<footer class="info">
		<p>Double-click to edit a todo</p>
		<!--  Remove the below line ↓  -->
		<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
		<!-- Change this out with your name and url ↓ -->
		<p>Created by <a href="http://todomvc.com">you</a></p>
		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
	</footer>
	<!--  Scripts here. Don't remove ↓  -->
	<!-- <script src="node_modules/todomvc-common/base.js"></script>
	<script src="js/app.js"></script> -->
	<script type="text/babel">
		const root = ReactDOM.createRoot(document.getElementById('root'))
		class Content extends React.Component {
			constructor(props) {
				super(props)
				this.state = {
					text: '',//新增加的任务值
					renderNeed: 'all',//all显示全部,true显示已完成,false显示未完成,控制列表渲染的决定因素
					todoList: [
						{
							id: 1,
							text: '学会一首歌',
							isFinished: false
						},
						{
							id: 2,
							text: '把衣服洗完',
							isFinished: true
						},
						{
							id: 3,
							text: '玩一会游戏',
							isFinished: false
						}
					]
				}
			}
			//点击删除按钮
			deleteSingleSession = (id) => {
				const todoList = [...this.state.todoList]
				var index = todoList.findIndex(ele => ele.id == id)
				todoList.splice(index, 1)
				this.setState({
					todoList
				})
			}
			//全选或者全不选
			checkAll = () => {
				var checked = event.target.checked;
				const todoList = [...this.state.todoList]
				todoList.forEach(ele => ele.isFinished = checked)
				this.setState({
					todoList
				})
			}
			//新增任务的onchange的事件处理程序
			changeSessionInput = () => {
				this.setState({
					text: event.target.value
				})
			}
			//新增一个任务
			addSession = () => {
				if (event.keyCode == 13) {
					var text = event.target.value
					if (!text) return;
					const todoList = [...this.state.todoList]
					var obj = {
						id: Date.now().toString(),
						text,
						isFinished: false
					}
					todoList.push(obj)
					this.setState({
						todoList,
						text: ''
					})
				}
			}
			//改变任务的完成状态
			changeFinishedStatus = (e, id) => {
				const todoList = [...this.state.todoList]
				var item = todoList.find(ele => ele.id == id)
				// item.isFinished=!item.isFinished 
				item.isFinished = e.target.checked
				this.setState({
					todoList
				})
			}
			//清除已经完成的任务
			clearComplete = () => {
				let todoList = [...this.state.todoList]
				todoList = todoList.filter(ele => !ele.isFinished)
				this.setState({
					todoList
				})
			}
			//改变渲染列表状态，全部，已完成，未完成
			changeRenderNeed = (renderNeed) => {
				this.setState({
					renderNeed
				})
			}
			//双击的处理程序,变成输入框
			handleDoubleClick = (id) => {
				const todoList = [...this.state.todoList]
				var item = todoList.find(ele => ele.id === id)
				item.inputFlag = true
				this.setState({
					todoList
				})
			}
			//输入框失去焦点，变成label
			inputBlur = (id) => {
				const todoList = [...this.state.todoList]
				var item = todoList.find(ele => ele.id === id)
				delete item.inputFlag
				this.setState({
					todoList
				})
			}
			//输入框点击回车，编辑label
			inputEnter = (id) => {
				if (event.keyCode == 13) {
					const todoList = [...this.state.todoList]
					var item = todoList.find(ele => ele.id === id)
					delete item.inputFlag
					this.setState({
						todoList
					})
				}
			}
			//label变成输入框
			changeInput = (e, id) => {
				const todoList = [...this.state.todoList]
				var index = todoList.findIndex(ele => ele.id === id)
				todoList[index].text = e.target.value
				this.setState({
					todoList
				})
			}
			render() {
				const { renderNeed, todoList, text } = this.state
				//获取未完成任务数量
				const noFinishedCount = todoList.filter(ele => !ele.isFinished).length
				let renderList = null
				if (renderNeed === 'all') {
					renderList = [...todoList]
				} else if (renderNeed === 'true') {
					renderList = todoList.filter(ele => ele.isFinished)
				} else {
					renderList = todoList.filter(ele => !ele.isFinished)
				}

				//渲染显示列表
				const renderDomList = renderList.map(ele => (
					<li key={ele.id} className={ele.isFinished ? 'completed' : ''}>
						<div className="view">
							{!ele.inputFlag && (
								<div>
									<input onChange={(e) => this.changeFinishedStatus(e, ele.id)} checked={ele.isFinished} className="toggle" type="checkbox" />
									<label onDoubleClick={() => this.handleDoubleClick(ele.id)}>{ele.text} </label>
									<button onClick={() => this.deleteSingleSession(ele.id)} className="destroy"></button>
								</div>
							)}
							{ele.inputFlag && <input className="change-input" type="text" value={ele.text} autoFocus onKeyUp={() => this.inputEnter(ele.id)} onBlur={() => this.inputBlur(ele.id)} onChange={(e) => this.changeInput(e, ele.id)} />}

						</div>
						<input className="edit" />
					</li>
				))
				return (
					<div>
						<section className="todoapp">
							<header className="header">
								<h1>todos</h1>
								<input onKeyUp={this.addSession} value={text} onChange={this.changeSessionInput} className="new-todo" placeholder="What needs to be done?" autoFocus />
							</header>
							{/* This section should be hidden by default and shown when there are todos */}
							<section className="main">
								<input onChange={this.checkAll} id="toggle-all" className="toggle-all" type="checkbox" />
								<label htmlFor="toggle-all">Mark all as complete</label>
								<ul className="todo-list">
									{/* These are here just to show the structure of the list items */}
									{/* List items should get the class `editing` when editing and `completed` when marked as completed */}
									{renderDomList}
								</ul>
								{renderList.length === 0 && <div className="no-session">当前无任务....</div>}
							</section>
							{/* This footer should be hidden by default and shown when there are todos */}
							<footer className="footer">
								{/* This should be `0 items left` by default */}
								<span className="todo-count"><strong>{noFinishedCount}</strong> 条 未完成</span>
								{/* Remove this if you don't implement routing */}
								<ul className="filters">
									<li onClick={() => this.changeRenderNeed('all')}>
										<a className="selected" href="#/">全部</a>
									</li>
									<li onClick={() => this.changeRenderNeed('false')}>
										<a href="#/active">未完成</a>
									</li>
									<li onClick={() => this.changeRenderNeed('true')}>
										<a href="#/completed">已完成</a>
									</li>
								</ul>
								{/* Hidden if no completed items are left ↓ */}
								<button onClick={this.clearComplete} className="clear-completed">清空已完成</button>
							</footer>
						</section>
					</div>
				)
			}
		}
		root.render(<Content />)
	</script>
</body>

</html>